import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Modal, message, Spin, Popconfirm } from 'antd';
import ${className}List from '../components/${moduleName}/${className}List';
import PageHeaderLayout from '../layouts/PageHeaderLayout';
import ${className}CreateForm from '../components/${moduleName}/${className}CreateForm';
import ${className}EditForm from '../components/${moduleName}/${className}EditForm';

import styles from './TableList.less';

@connect(state => ({
    ${classObjectName}: state.${classObjectName}
}))
export default class ${className}Page extends PureComponent{
    state = {
        selectedRows: [],
        selectedRowKeys:[],
        detailLoading:false
    };

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: '${classObjectName}/queryPages',
            payload: {pageNum:1,pageSize:10}
        });
    }

    handlePageChange =(pageNum,pageSize)=>{
        const { dispatch } = this.props;
        dispatch({
            type: '${classObjectName}/queryPages',
            payload: {pageNum,pageSize},
        });
    };

    handleSelectRows = (rows,keys) => {
        this.setState({
            selectedRows: rows,
            selectedRowKeys:keys
        });
    };

    handleBathDelete = () =>{
        const { dispatch } = this.props;
        const { selectedRowKeys } = this.state;
        dispatch({
            type: '${classObjectName}/delete',
            payload: {selectedRowKeys},
            callback:()=>{
                this.setState({
                    selectedRows: [],
                    selectedRowKeys:[]
                });
            }
        });
    };

    render(){
        const { ${classObjectName}: { loading, page } } = this.props;
        const { selectedRows, selectedRowKeys } = this.state;
        return (
            <div>
                <${className}EditForm/>
                <PageHeaderLayout title="${className}表格">
                    <Card bordered={false}>
                        <div className={styles.tableList}>
                            <div className={styles.tableListOperator}>
                                <${className}CreateForm loading={loading}>
                                    <Button icon="plus" type="primary">新建</Button>
                                </${className}CreateForm>
                                {
                                selectedRows.length > 0 && (
                                <span>
                                  <Popconfirm title="删除的数据不能恢复，确定要全部删除吗?" onConfirm={this.handleBathDelete} okText="确定" cancelText="取消">
                                    <Button type="primary" disabled={null!=selectedRowKeys && selectedRowKeys.length > 0 ? false : true}  icon="delete">
                                      {null!=selectedRowKeys && selectedRowKeys.length > 1 ? '批量删除' : '删除'}
                                    </Button>
                                  </Popconfirm>
                              </span>
                                )
                                }
                            </div>
                            <${className}List page={page} loading={loading}
                                      onPageChange={this.handlePageChange}
                                      onSelectRow={this.handleSelectRows}
                                      selectedRows={selectedRows}
                                      selectedRowKeys={selectedRowKeys}
                                      handleModalVisible={this.handleModalVisible}/>
                        </div>
                    </Card>
                </PageHeaderLayout>
            </div>
        );
    }
}